<style>
    #divlottery span {
        width: 25px;
        height: 25px;
        font-size: 14px;
        line-height: 25px;
        text-align: center;
        border-radius: 12px;
        display: inline-block;
        margin: 5px 10px 5px 0;
    }

    #divlottery .sp1 {
        color: white;
        background-color: #cc0000;
    }

    #divlottery .sp2 {
        color: white;
        background-color: #3074da;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <form>
                <div class="input-group">
                    <span class="input-group-append">
                        <button class="btn btn-warning" type="button" id="btnSearch">彩票类型</button>
                    </span>
                    <div class="input-group-append">
                        <select class="custom-select" id="seLotteryType" name="code">
                            <option value="001">双色球</option>
                            <option value="110">七星彩</option>
                            <option value="003">七乐彩</option>
                            <option value="002">福彩3d</option>
                            <option value="113">大乐透</option>
                            <option value="108">排列3</option>
                            <option value="109">排列5</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="divlottery" class="row mt-3"></div>
</div>

<script>
    QueryLottery();
    $("#seLotteryType").change(QueryLottery);

    function QueryLottery() {
        ss.loading();

        ss.ajax({
            url: "http://cp.zgzcw.com/lottery/hisnumber.action?lotteryId=" + $("#seLotteryType").val() + "&issueLen=24",
            dataType: "json",
            success: function (data) {
                data = ss.datalocation(data);
                if (data.length) {
                    var htm = [];
                    $(data).each(function () {
                        var codes = (this.lotteryNumber || this.tryoutNumber).split('+'),
                            code1 = codes[0].split(','), spans1 = spans2 = '';
                        for (var k = 0; k < code1.length; k++) {
                            spans1 += '<span class="sp1">' + code1[k] + '</span>';
                        }

                        if (codes[1] != undefined) {
                            var code2 = codes[1].split(',');
                            for (var u = 0; u < code2.length; u++) {
                                spans2 += '<span class="sp2">' + code2[u] + '</span>';
                            }
                        }

                        htm.push(
                            '<div class="col-xl-3 col-md-4 col-sm-6 mt-2 mb-2"><div class="card card-secondary"><div class="py-2 px-2">'
                            + '<div class="et"><label class="h5 mr-2">' + this.lotteryExpect + '</label><small>' + (new Date(this.ernieDate)).toISOString().substr(0, 10) + '</small></div>'
                            + spans1 + spans2
                            + '</div></div></div>'
                        );
                    });
                    $("#divlottery").html(htm.join(''));
                }
            },
            error: function () {
                ss.loading(0);
                jz.msg("网络错误");
            },
            complete: function () {
                ss.loading(0);
            }
        })
    }

</script>